<template>
    <div class="mid-box">
        <ul  class="todo-list">
            <li  v-for="(item,index) in msgStore.list" :key="item.id" class="list-item">
                <h4 class="text-msg" :style="{ textDecoration: item.completed ? 'line-through' : 'none' }"
                @click="item.completed = !item.completed">
                {{index+1}}. {{ item.msg }}
                </h4>
                <button class="delbtn" @click="delItem(item.id)">
                    <img src="@/icon/icons8-trash-50 (1).png" alt="删除" class="del-icon">
                </button>
            </li> 
        </ul>
    </div>
</template>

<script setup>
import { useMsgStore } from '@/stores/msgStores'
const msgStore = useMsgStore()

// 删除列表项
const delItem = (id) => {
    msgStore.delList(id)
}

</script>

<style scoped>
    .mid-box {
        display: flex;
        justify-content: center;
        width: 600px;
        
    }

    .mid-box .todo-list {
        list-style: none; 
        padding-left: 0;
        width: 300px;
    }

    .mid-box .todo-list .list-item {
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        width: 100%;
        height: 40px; 
        border-radius: 4px; 
        margin: 5px 0;
        padding-left: 10px;
        border:  2px solid black;
    }

    .mid-box .todo-list .list-item .text-msg{
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    .mid-box .todo-list .list-item .text-msg:hover{
        transform: scale(1.1);
        cursor: pointer;
    }

    .mid-box .todo-list .list-item .delbtn {
        height: 24px;
        padding: 0 12px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }

    .mid-box .todo-list .list-item .delbtn .del-icon {
        width: 20px;
        height: 20px;
        display: none;
    }

    .mid-box .todo-list .list-item .delbtn .del-icon:hover {
        transform: scale(1.1);
        width: 20px;
        height: 20px;
    }

    .mid-box .todo-list .list-item:hover .delbtn .del-icon {
        transition: all 0.3s ease;
        display: block;
    }

</style>